<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>overlay 3d</title>
    <style>
      section {
        margin: 20px;
      }
    </style>
  </head>
  <body style="font-family: sans-serif">
    <noscript>
      <strong
        >niivue doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      >
    </noscript>
    <section>
      <h1>Overlay 3D</h1>
      <p>
        NiiVue can support adding multiple overlay images in 3D mode as well
        (two overlays added here). The user can also change the orientation and
        depth of the clip planes (if you have a keyboard, press C to turn off
        clip planes).
      </p>
    </section>
    <!-- demo 1 -->
    <section>
      <div id="demo1" style="width: 90%; height: 400px">
        <canvas id="gl1" height="480" width="640"> </canvas>
      </div>
    </section>
    <script type="module">
      import * as niivue from "../dist/index.js";
      
      var volumeList1 = [
        {
          url: "../images/mni152.nii.gz", //"./RAS.nii.gz", "./spm152.nii.gz",
          colormap: "gray",
          opacity: 1,
          visible: true,
        },
        {
          url: "../images/hippo.nii.gz", //"./RAS.nii.gz", "./spm152.nii.gz",
          colormap: "Winter",
          opacity: 1,
          visible: true,
        },
        {
          url: "../images/hippolr.nii.gz", //"./RAS.nii.gz", "./spm152.nii.gz",
          colormap: "Warm",
          opacity: 1,
          visible: true,
        },
      ];
      var nv1 = new niivue.Niivue();
      await nv1.attachTo("gl1");
      nv1.loadVolumes(volumeList1);
      nv1.setSliceType(nv1.sliceTypeRender);
      nv1.setClipPlane([0.15, 270, 0]);
    </script>
  </body>
</html>
